<!-- 知识图谱导航组件 -->
<template>
  <div class="kg-nav">
    <el-button 
      type="primary" 
      size="large"
      @click="navigateToKnowledgeGraph"
      :loading="isNavigating"
    >
      <el-icon><Share /></el-icon>
      知识图谱透视
    </el-button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()
const isNavigating = ref(false)

const navigateToKnowledgeGraph = async () => {
  try {
    isNavigating.value = true
    await router.push('/search-engine/detail')
    ElMessage.success('已跳转到知识图谱透视页面')
  } catch (error) {
    console.error('导航失败:', error)
    ElMessage.error('页面跳转失败')
  } finally {
    isNavigating.value = false
  }
}
</script>

<style scoped>
.kg-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2vh;
}
</style>